<template>
    <div class="table">
        <el-row>
            <el-button icon="el-icon-plus" type="primary" class="mt20 mb20 fl" @click="handleEdit()">新建角色</el-button>
        </el-row>
        <el-table class="sd" stripe border :data="tableData" v-loading="loading">
            <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
            <el-table-column align="center" prop="account" label="账号"></el-table-column>
            <el-table-column align="center" prop="name" label="角色"></el-table-column>
            <el-table-column align="center" prop="status" label="状态">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#F7AB48"
                        inactive-color="#F9EEDF"
                        @change="changeSwitch(scope.row)"/>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="person" label="创建人"></el-table-column>
            <el-table-column align="center" prop="date" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="text"
                        @click="handleEdit(scope.$index, scope.row)">配置权限</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t fr"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="ConflictForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="ConflictForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'accountInfo',
        data () {
            return {
                // 查询表单
                ConflictForm: {
                    name: '',
                    phone: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // 数据总条数
                // total: 0,
                // 表格数据
                tableData: [],
                params: {},
                loading: false
            }
        },
        created () {
            this.$nextTick(() => {
                this.getRoleData();
            });
        },
        mounted (){

        },
        watch: {
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                if(i != undefined || r != undefined){
                    this.$routerTo('editAccount', { roleData: r, type: 'edit', callback: this.getRoleData });
                }else{
                    this.$routerTo('editAccount', { type: 'add', callback: this.getRoleData });
                }
            },
            // 点击查询置为第一页
            queryList1 () {
                this.ConflictForm.pageNum = 1
                this.params = { ...this.ConflictForm }
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                this.getRoleData()
            },
            getRoleData () {
                let cData = JSON.parse(localStorage.getItem('accountData'));
                if(!cData){
                    cData = [
                        {"index": "1","account": "admin","name": "管理员","status": 0,"person": "admin","date": "2020-05-01 09:00"},
                        {"index": "2","account": "admin","name": "管理员","status": 1,"person": "admin","date": "2020-05-01 09:00"},
                        {"index": "3","account": "admin","name": "管理员","status": 0,"person": "admin","date": "2020-05-01 09:00"},
                        {"index": "4","account": "admin","name": "管理员","status": 0,"person": "admin","date": "2020-05-01 09:00"}
                    ]
                }
                localStorage.setItem('accountData', JSON.stringify(cData));
                this.tableData = cData;
            },
            changeSwitch (){
            },
            // 重置表单
            reset () {
                this.ConflictForm.phone = ''
                this.ConflictForm.name = ''
                this.ConflictForm.pageNum = 1
                this.ConflictForm.pageSize = 10
                this.queryList1()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.ConflictForm.pageSize = val
                this.params.pageSize = val
                if (this.ConflictForm.pageNum > pages) {
                    this.ConflictForm.pageNum = 1
                    this.params.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.ConflictForm.pageNum = val
                this.params.pageNum = val
                this.queryList()
            }
        }
    }
</script>

<style scoped>
</style>
